<template>
    <div class="content-H">
    <headLine ></headLine>
    <classify ></classify>
    <Top_F v-if="choice == 'Top'"></Top_F>
    <Classify_F v-if="choice == 'Classify'"></Classify_F>
    </div>
    
</template>
<script setup>
    import {ref,reactive,computed, onMounted} from 'vue'    
    import headLine from '../New-components/headLine.vue'
    import classify from '@/New-components/classifyNav.vue';
    import Top_F from '@/New-components/Top_F.vue'
    import Classify_F from '@/New-components/Classify_F.vue'
    import { useStateStore } from '@/New-Stores/stateStore';
    const stateStore = useStateStore();
    const choice = computed(() => stateStore.getActiveTab());

    onMounted(() => {
        stateStore.setActiveTab('Top')
    })
</script>
<style scoped>
.content-H{
    width: 410px;
    height: 100%;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #605d5d38;
  }
</style>